浏览器播放RTSP摄像头视频

2023-02-11 01:14| 来源: 网络整理| 查看: 265

一、项目需求，需要在chrome浏览器中播放rtsp协议的摄像头视频流

二、思路： 1、chrome已经不支持插件了，所以排除一切插件的思路； 2、浏览器目前停留在支持rtmp协议，hls协议流视频阶段，还没开始支持rtsp协议，所以可以考虑将rtsp转成rtmp和hls。在领导的指导下，选择的是rtmp，至于hls有兴趣的同学可以自己去研究，整体思路与转rtmp是一直的。 3、有了大体方向就开始着手找资料了，网上有很多使用FFmpeg+nginx来将rtsp转rtmp的，当然也有可以花钱去买转码器的，那就更加方便了。（转码器也不是很贵，项目资金充足的，而且不想花时间研究的，可以考虑这个会更好）；

三、实现： 3.1、rtsp公网测试例子：rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov 3.2、FFmpeg： 3.2.1 资源下载：通过官网http://www.ffmpeg.org/download.html或其他途径下载ffmpeg（https://ffmpeg.zeranoe.com/builds），解压到随意目录下，解压之后如下图：在这里插入图片描述 3.2.2配置环境变量，命令窗口输入“ffmpeg -version”出现如下图及说明环境配置正确

3.3、nginx: 3.3.1、安装配置nginx，配置已经配置好了，直接下载即可使用。nginx包和配置文件在这里插入图片描述 3.3.2、修改conf文件夹下nginx.conf文件，文件内容如下：

worker_processes 1; error_log logs/error.log debug; events { worker_connections 1024; } rtmp { server { listen 1935; chunk_size 4000; application live { live on; } application hls { live on; hls on; hls_path temp/hls; hls_fragment 8s; } } } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 20000; location / { root html; index index.html index.htm; } location /stat { rtmp_stat all; rtmp_stat_stylesheet stat.xsl; } location /stat.xsl { root html; } location /hls { #server hls fragments types{ application/vnd.apple.mpegurl m3u8; video/mp2t ts; } alias temp/hls; expires -1; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }

3.3.3、修改完成后启动nginx，有多种方式启动nginx，（1）、直接双击nginx.exe，双击后一个黑色的弹框一闪而过，（2）、打开cmd命令窗口，切换到nginx解压目录下，输入命令nginx.exe或者start nginx，回车即可检查nginx是否启动成功：直接在浏览器中输入网址http:localhost:post,post为nginx.conf中设置的，此处我设置的是20000，回车出现如下在这里插入图片描述说明启动成功了。

3.3.4、关闭nginx：如果使用cmd命令窗口启动nginx，关闭cmd窗口是不能结束nginx进程的，可使用两种方法关闭nginx （1）、输入nginx命令 nginx -s stop（快速停止nginx）或者nginx -s quit（完整有序的停止nginx）（2）使用taskkill taskkilll /f /t /im nginx.exe **3.3.5、**nginx还可以做负载均衡，此处没有研究，有需求的同学可自行研究。

3.3.6、开始转码：在cmd窗口执行如下命令

ffmpeg -re -rtsp_transport tcp -i "rtsp地址" -f flv -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 "rtmp://本机地址:1935(nginx.conf的rtmp模块下listen)/live(rtmp模块下application设置)/test(随便取名字)"

启动之后如下图：在这里插入图片描述注意： 1、ffmpeg转码与nginx代理可以不在同一台服务器上进行，但这种情况对带宽要求较高 2、如果rtsp视频流断开，可能导致转码程序一直等待，因此加入-stimeout参数（表示超时时间），如果超时未获取到视频流，则报错退出（如需重新获取，可以写个bat脚本，循环执行ffmpeg命令）

3.4、chrome中播放rtmp实时流： H5的video标签是不支持rtmp的，但是我们有video.js可以解决这一问题。然而在使用video.js的时候遇到了问题，刚开始怎么都播不出来，后来经过一番查找发现，在video.js 6以上的版本是已经没法播放了。原因是video.js播放rtmp的原理还是通过flash。可能是video为了紧跟步伐，去掉了flash。代码包请点击这里下载将代码修改如下：在这里插入图片描述

测试rtmp直播源视频无法正常播放，请点击下方启用flash function flashChecker() { var hasFlash = 0; //是否安装了flash var flashVersion = 0; //flash版本 var isIE = /*@[email protected]*/0; //是否IE浏览器 if (isIE) { var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if (swf) { hasFlash = 1; VSwf = swf.GetVariable("$version"); flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]); } } else { if (navigator.plugins && navigator.plugins.length > 0) { var swf = navigator.plugins["Shockwave Flash"]; if (swf) { hasFlash = 1; var words = swf.description.split(" "); for (var i = 0; i < words.length; ++i) { if (isNaN(parseInt(words[i]))) continue; flashVersion = parseInt(words[i]); } } } } return {f: hasFlash, v: flashVersion}; } var fls = flashChecker(); var s = ""; if (fls.f) { document.getElementsByClassName("openFlash")[0].style.display = "none"; document.getElementsByClassName("openFlashTips")[0].style.display = "none"; // document.write("您安装了flash,当前flash版本为: " + fls.v + ".x"); } else { document.getElementsByClassName("openFlash")[0].style.display = "block"; document.getElementsByClassName("openFlashTips")[0].style.display = "block"; // document.write("您没有安装flash"); }

启动tomcat，在浏览器中输入网址即可查看实时视频（如下图的测试视频）。在这里插入图片描述正式环境测试效果：转码之后差不多延迟在3-5秒左右。欢迎大家一起交流，如果文章中有错误的地方，也希望指正。

【本文地址】

公司简介

联系我们